<%--
  Created by IntelliJ IDEA.
  User: ykq
  Date: 2023/7/20
  Time: 15:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>主页面</title>
    <%--引入vue的js--%>
    <script type="text/javascript" src="/js/vue.js"></script>
    <%--引入elementui的js--%>
    <script type="text/javascript" src="/js/index.js"></script>
    <%--引入axios的js 发送异步请求--%>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <%--引入elementui的css--%>
    <link type="text/css" rel="stylesheet" href="/css/index.css">
</head>
<body>
<div id="app">
    <el-container class="home-container">
        <!-- 头部区域 -->
        <el-header>Header
            <el-dropdown trigger="click" @command="handleCommand">
        <span class="el-dropdown-link">
           <el-avatar :src="userinfo.url"></el-avatar>
        </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="userinfo" icon="el-icon-user-solid">用户信息</el-dropdown-item>
                    <el-dropdown-item command="logout" icon="el-icon-switch-button">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-header>
        <!-- 页面主体区域 -->
        <el-container>
            <!-- 侧边栏 -->
            <el-aside width="200px">
                <el-menu
                        default-active="2"
                        class="el-menu-vertical-demo"
                        background-color="#545c64"
                        text-color="#fff"
                >
                    <el-submenu  :index="first.mid+''" v-for="first in menus">
                        <template slot="title">
                            <span>{{first.mname}}</span>
                        </template>
                        <el-menu-item :index="second.mid+''" v-for="second in first.children">
                            <%--/view/toStaff--%>
                            <a :href="second.murl" target="main" style="color: white;text-decoration: none">{{second.mname}}</a>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <!-- 主体结构 -->
            <el-main>
                <iframe src="" name="main" frameborder="0" width="100%" height="100%"></iframe>
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            //表示当前用户信息
            userinfo: {},
            //菜单对象
            menus:[],
        },
        //页面加载完毕后执行的代码
        created() {
            this.info();
            this.leftMenu();
        },
        methods: {
            //加载左侧菜单
            leftMenu(){
                axios.get("/menu/leftMenu").then(result=>{
                     this.menus=result.data.data;
                })
            },
            //拉下狂事件
            handleCommand(command) {
                if (command == "userinfo") {

                } else if (command == "logout") {
                    axios.get("/staff/logout").then(result => {
                        if (result.data.code == 200) {
                            this.$message.success(result.data.msg);
                            setTimeout(function () {
                                location.href = '/login.jsp'
                            }, 1000)
                        }
                    })
                }
            },
            //获取当前登录者的信息
            info() {
                axios.get("/staff/info").then(result => {
                    if (result.data.code == 500) {
                        this.$message.error(result.data.msg);
                        location.href = "/login.jsp";
                    } else {
                        this.userinfo = result.data.data;
                    }
                })
            },
            logout() {

            }
        }
    })
</script>

<style>
    html, body, #app {
        padding: 0px;
        margin: 0px;
    }

    .home-container {
        height: 100%;
    }

    .el-header {
        background-color: #373D41;
        display: flex;
        justify-content: space-between;
        padding-left: 0px;
        align-items: center;
        color: white;
        font-size: 20px;
    }

    .el-header > div {
        display: flex;
        align-items: center;
    }

    .el-header > div > span {
        margin-left: 15px;
    }

    .el-aside {
        background-color: #333744;

    }

    .el-aside > .el-menu {
        border-right: none;
    }

    .el-main {
        background-color: #eaedf1;
    }

    .toggle-button {
        display: flex;
        justify-content: center;
        color: white;
    }
</style>
</html>
